import React,{Component} from 'react';
import {connect} from 'dva';
import {Button,Table, Divider, Tag} from 'antd'
import Formright from '../components/formdrawer'


  
//   const data = [{
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//   }, {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//   }, {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//   }];
class Lists extends Component{
    constructor(){
        super();
        this.state={
            columns:[{
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
                render: text => <a href="javascript:;">{text}</a>,
              }, {
                title: 'Age',
                dataIndex: 'age',
                key: 'age',
              },{
                title: '昵称',
                dataIndex: 'w_name',
                key: 'w_name',
              }, {
                title: 'Address',
                dataIndex: 'address',
                key: 'address',
              },{
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
              },{
                title: '联系方式',
                dataIndex: 'phone',
                key: 'phone',
              }, {
                title: 'Tags',
                key: 'tags',
                dataIndex: 'tags',
                render: tags => (
                  <span>
                    {tags.map(tag => {
                      let color = tag.length > 5 ? 'geekblue' : 'green';
                      if (tag === 'loser') {
                        color = 'volcano';
                      }
                      return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
                    })}
                  </span>
                ),
              }, {
                title: 'Action',
                key: 'action',
                render: (text, record) => (
                  <span>
                    
                    <Button type={record.isuse?'danger':'primary'} onClick={()=>{this.changeStatus(record.isuse,record.id)}}>{record.isuse?'启用':'禁用'}</Button>
                    <Divider type="vertical" />
                    <Button type="danger" onClick={()=>{this.deleteItem(record.id)}}>Delete</Button>
                  </span>
                ),
              }],
              status:false,
        }
        
    }
    componentDidMount(){
        this.props.dispatch({type:'teacher/getListData',payload:'1'})
    }
    changeStatus(isuse,key){
        console.log(isuse,key);
        var tempIsuse;
        if(isuse){
          tempIsuse = 0;
        }else{
          tempIsuse = 1;
        }
        //console.log(tempIsuse);
        this.props.dispatch({type:'teacher/changeIsuse',payload:{data:tempIsuse,key:key}});
    }
    deleteItem(id){
      //console.log(id);
      this.props.dispatch({type:'teacher/deleteItem',payload:{id:id}});
    }
    render(){
        return(
            <React.Fragment>
               <Formright></Formright>
               <Table columns={this.state.columns} dataSource={this.props.data} style={{marginTop:'30px'}}/>
               
            </React.Fragment>
        )
    }
}
const mapStateProps = (state)=>{
    return{
        data:state.teacher.data,
    }
}
export default connect(mapStateProps)(Lists);